<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书借阅页面</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <h2>图书借阅</h2>
    <el-form :model="form" ref="form" label-width="120px">
        <el-form-item label="复本编号" :rules="[{ required: true, message: '请输入复本编号', trigger: 'blur' }]">
            <el-input v-model="form.copyId" placeholder="输入图书复本编号"></el-input>
        </el-form-item>
        <el-form-item label="用户编号" :rules="[{ required: true, message: '请输入用户编号', trigger: 'blur' }]">
            <el-input v-model="form.userId" placeholder="输入用户编号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="borrowBook">借阅图书</el-button>
        </el-form-item>
    </el-form>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    copyId: '',
                    userId: ''
                }
            }
        },
        methods: {
            borrowBook() {
                const params = {
                    copyId: this.form.copyId,
                    userId: this.form.userId
                };

                axios.post(`http://localhost:8091/borrowRecords`, null, { params })
                    .then(response => {
                        if (response.data.status === "200") {
                            this.$message({
                                message: "借阅成功！",
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: response.data.message || "借阅失败，请检查信息！",
                                type: "warning"
                            });
                        }
                    })
                    .catch(error => {
                        const errorMessage = error.response && error.response.data
                            ? error.response.data.message
                            : "借阅失败，请重试！";

                        this.$message({
                            message: errorMessage,
                            type: "error"
                        });
                    });
            }
        }
    });
</script>
</body>
</html>
